<template>
	<view class="couponPage">
		<view class="tab"><shortTabs :tabs="tabs" :center="true" :curTabs="curTabs" @changeTab="changeTab"></shortTabs></view>
		<view class="coupons_list">
			<view class="coupons_item" v-for="(item, index) in couponList.lists" :key="index">
				<view class="coupons_left_price_box fn-cl-F34035">
					<view class="">
						<span class="fn-sz-26">￥</span>
						<span class="fn-sz-52">{{ numberToFix(item.price) }}</span>
					</view>
					<view class="fn-sz-20">满{{ item.full_use }}可用</view>
				</view>
				<view class="coupons_right_date_box">
					<view class="fn-sz-28 mar-bottom-10">有效期</view>
					<view class="fn-sz-24 fn-cl-999999">{{ item.start_date }}至{{ item.end_date }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import com from '../../mixin/index.js';
import shortTabs from '../../components/shortTabs/shortTabs.vue';

export default {
	mixins: [com],
	components: {
		shortTabs
	},
	data() {
		return {
			tabs: ['未使用', '已使用', '已过期'],
			curTabs: 0,
			page: {
				page: 1,
				page_size: 12
			},
			couponList: {
				lists: [],
				total: 1,
				total_page: 0
			}
		};
	},
	onLoad() {
		this.getMyCoupon();
	},
	onReachBottom() {
		this.getMyCoupon();
	},
	methods: {
		getMyCoupon() {
			let params = {
				status: this.curTabsStatus,
				...this.page
			};
			this.getList('couponList', 'getMyCoupon', 'page', params);
		},
		changeTab(idx) {
			this.curTabs = idx;
			this.page = {
				page: 1,
				page_size: 12
			};
			this.couponList = {
				lists: [],
				total: 1,
				total_page: 0
			};
			this.getMyCoupon();
		}
	},
	computed: {
		curTabsStatus() {
			var status;
			switch (this.tabs[this.curTabs]) {
				case '未使用':
					status = 'no_use';
					break;
				case '已使用':
					status = 'used';
					break;
				case '已过期':
					status = 'out_date';
					break;
			}
			return status;
		}
	}
};
</script>

<style lang="scss">
.couponPage {
	padding: 24rpx;
	min-height: 100vh;
	background-color: #f9f9f9;
	box-sizing: border-box;
	.coupons_list {
		padding-top: 30rpx;
		.coupons_item {
			display: flex;
			width: 100%;
			height: 184rpx;
			align-items: center;
			background: url('../../static/images/icon/bg_coupons.png') no-repeat;
			background-size: 100% 184rpx;
			box-sizing: border-box;
			padding: 33rpx 30rpx;
			margin-bottom: 17rpx;
			.coupons_left_price_box {
				margin-right: 80rpx;
				flex: none;
			}
			.coupons_right_date_box {
			}
		}
	}
}
</style>
